<template>
  <div>
    <div id='formio'></div>
  </div>
</template>

<script setup lang="ts">
import { Formio } from 'formiojs';
import 'formiojs/dist/formio.form.min.css'
import { onMounted } from "vue";
import wizard from "./wizard.json"

onMounted(() => {
  const ele = document.getElementById('formio')
  if (ele) {
    Formio.createForm(document.getElementById('formio'), {
      components: [
        {
          type: 'textfield',
          key: 'iAmATrigger',
          label: 'I am a trigger',
          placeholder: 'Enter joe or bob.',
          input: true,
        },
        {
          type: 'textfield',
          key: 'lastName',
          label: 'Last Name',
          placeholder: 'Enter your last name',
          input: true,
          tooltip: 'Enter your <strong>Last Name</strong>',
          description: 'Enter your <strong>Last Name</strong>',
          logic: [
            {
              name: 'Bob Logic',
              trigger: {
                type: 'simple',
                simple: {
                  show: true,
                  when: 'iAmATrigger',
                  eq: 'bob'
                }
              },
              actions: [
                {
                  name: 'Set to snob',
                  type: 'value',
                  value: 'value = \'snob\';'
                }
              ]
            },
            {
              name: 'Joe Logic',
              trigger: {
                type: 'simple',
                simple: {
                  show: true,
                  when: 'iAmATrigger',
                  eq: 'joe'
                }
              },
              actions: [
                {
                  name: 'Set schmoe',
                  type: 'value',
                  value: 'value = \'schmoe\';'
                }
              ]
            }
          ]
        },
      ]
    }, {}).then(form => {
      form.on("submit", (submission: any) => {
        console.log(submission)
      })
    });
  }
})
</script>

<style scoped>
#formio {
  padding: 20px;
}
</style>